<template>
  <div class="page-container">
    <div class="loginWrap">
      <div class="title">欢迎登录</div>
      <div class="loginInner">
        <div class="subTit">用户登录</div>
        <el-form ref="ruleLoginFormRef" :model="form" :rules="rules">
          <el-form-item label="">
            <el-input v-model="form.loginName" />
          </el-form-item>
          <el-form-item label="" prop="passwd">
            <el-input v-model="form.passwd" type="password" />
          </el-form-item>

          <el-button class="btn" type="primary" @click="onConfirm(ruleLoginFormRef)"
          >登 录</el-button
          >
        </el-form>
      </div>
      <div class="copyright">技术支持：网新恩普</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import axios from '@/utils/axios'

export default defineComponent({
  name: 'LoginPage',
  setup() {
    const ruleLoginFormRef = ref<FormInstance>()
    const rules = reactive<FormRules>({
      passwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
          // eslint-disable-next-line consistent-return
          validator: (rule: any, value: any, callback: any) => {
            if (value !== '') {
              // todo 暂时使用简单校验
              if (value.length < 6) {
                callback(new Error('请输入至少6位的密码'))
                return false
              }
              // if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
              //   callback(new Error('密码须为8~16，且需要大小写字母、数字。'))
              //   return false
              // }
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    })

    axios.post('/user/doOut').then(() => {
      // console.log('user/doOut', res)
      localStorage.removeItem('userInfo')
      localStorage.removeItem('userType')
    })

    const router = useRouter()
    // dialog
    const page = reactive({
      form: {
        porType: 1,
        loginName: '',
        passwd: ''
      },

      onConfirm(formEl: FormInstance | undefined) {
        console.log('data.form', page.form)

        if (!formEl) return
        // eslint-disable-next-line consistent-return
        formEl.validate((valid) => {
          if (valid) {
            console.log('submit!')

            page.onSubmit()
            // axios
            //   .post('/user/updatePasswd', {
            //     currentPasswd: data.form.currentPasswd,
            //     newPasswd: data.form.newPasswd
            //   })
            //   .then((res: any) => {
            //     if (res.success) {
            //       ElMessage.success(res.resultDes)
            //       data.dialogVisible = false
            //     } else {
            //       ElMessage.error(res.resultDes)
            //     }
            //   })
          } else {
            console.log('error submit!')
            return false
          }
        })
      },
      onSubmit() {
        // console.log('submit!')

        axios.post('/user/login', page.form).then((res: any) => {
          if (res.success) {
            ElMessage.success(res.resultDes)
            localStorage.setItem('userInfo', JSON.stringify(res.result))

            router.push('/')
          } else {
            ElMessage.error(res.resultDes)
          }
        })
        // user/login
      }
    })

    return {
      ruleLoginFormRef,
      rules,
      ...toRefs(page)
    }
  }
})
</script>

<style scoped lang="stylus">
:deep(.el-form){
  padding: 0 45px

  .el-form-item{
    margin-bottom: 28px

    .el-input__wrapper {
      box-shadow: none;
      height:40px
      background-color: rgba(255,255,255,0.01);
      border-radius: 20px;
      .el-input__inner {
        padding-left: 36px
        font-size: 16px
        color: #fff
        background-color: transparent
      }
    }
  }

}

.page-container {
  width:100%
  height:100%
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 50%
  box-sizing border-box
  background:#150a39 url("../assets/login/bg2x.png") 0 0 no-repeat
  background-size: 100% 100%;
  overflow: auto

  .loginWrap{
    width:450px

    .title{
      margin-bottom: 50px
      font-size:36px
      color: #eee
      text-align: center;
    }
    .copyright{
      text-align: center;
      color: #b4b0c0;
      font-size: 16px;
      padding-top: 15px;
      opacity .5
    }

    .loginInner{
      margin: 0 auto
      width:400px
      height:380px
      background: url("../assets/login/box2x.png") 0 0 no-repeat
      background-size: 100% 100%;

      .subTit{
        text-align: center;
        font-size:30px
        color: #fff
        height: 120px;
        line-height: 120px
      }
      .btn{
        position: relative;
        border: 0 none;
        margin-left: -3px
        width:316px
        height:42px
        background: url("../assets/login/button.png") 0 0 no-repeat
        background-size: 100% 100%;
        font-size:18px

        &:active{
          top:1px;
        }
      }
    }
  }
}
</style>
